<style>
.full-wh {
  height: 100%;
  width: 100%;
}
.full-width-m {
    width: 100% !important;
}
.full-height-m {
    height: 100% !important;
}
.left-title,.right-title {
  background: #e9f5f3;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}
label{
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}
p {
  margin-bottom: 0;
  margin-top: 10px;
}
.rb-3 {
  border-right: 3px solid #f3f3f4;
}
.bb-2 {
  border-bottom: 2px solid #f3f3f4;
}
.bb-1 {
  border-bottom: 1px solid #f3f3f4;
}
.query-btn,.save-btn {
  width: 72px;
  height: 36px;
}
.pt-45 {
  padding-top: 45px;
}
.mb--2{
  margin-bottom: -2px;
}
.mb--1{
  margin-bottom: -1px;
}
.group-tag {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 1px solid #DCDFE6;
  border-color: #28a087
}
.group-btn {
  margin-right: 5px !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: 2px solid #DCDFE6;
  border-color: #28a087
}
.new-btn {
  width: 86px;
  height: 28px;
}
.flex-bar {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.flex-bar > .flex-item {
  flex: auto;
  font-size: 14px;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 10px !important;
}
.el-pagination {
  white-space: pre-wrap;
}
.flex-pagination {
  display: flex;
  align-items: flex-end;
}
.project-toolbar {
  height: 5%;
}
.project-table {
  height: 50%;
}
.project-pagination {
  height: 20%;
}
.order-toolbar {
  height: 5%;
}
.order-table {
  height: 50%;
}

.project-row > td{
  border: none;
}
.project-row {
  display: grid;
  border: 1px solid #e9edf0;
  border-color: #e9edf0;
  border-radius: 4px;
  margin-top: 6px;
}
.project-row:first-child {
  margin-top: 0;
}
.order-row > td{
  border: none;
}
.order-row {
  display: grid;
  border: 1px solid #e9edf0;
  border-color: #e9edf0;
  border-radius: 4px;
  margin-top: 6px;
}
.order-row:first-child {
  margin-top: 0;
}
.mr-1 {
  margin-right: 1px;
}

.table-list::after {
  content: "";
  display: block;
  clear: both;
}
.track-list {
  max-height: 240px;
  overflow-y: auto;
}
.track-item {
  padding-top: 20px;
}
.el-upload--picture-card {
  height: 80px;
  width: 80px;
  line-height: 80px;
}
.el-upload-list--picture-card .el-upload-list__item {
  height: 80px;
  width: 80px;
}
.images-upload {
  max-height: 80px;
}
.required-label:after {
    content: '*';
    color: #f37373;
    margin-left: 4px;
}
.table-list {
  min-height: 666px;
}
.detail-row {
  min-height: 720px;
}
.tab-select{
    color: #28a087;
    background-color: #e6f3f0;
}
.img-dialog>.el-dialog {
  max-width: 500px;
}
.project-row h4,h5 {
  margin-block-start: 10px;
  margin-block-end: 10px;
  padding-right: 5px;
}
.detail-row span {
  font-size: 14px;
}
.detail-row p {
  padding-right: 20px;
}
.table-list .el-divider--vertical {
  background-color: f3f3f4;
  position: absolute;
  min-height: 100%;
  margin: 0px;
  width: 3px;
}
</style>

<template>
  <el-row type="flex" class="full-wh p-10 bg-default" justify="space-around">
    <el-col :span="11" class="full-height pr-10">
      <div class="grid-content full-height full-width bg-white">
        <el-row :gutter="10" class="pl-20 pr-20">
          <div class="grid-content">
            <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" class="pt-20 pb-10">
              <el-select v-model="search.projectStatus" clearable placeholder="项目状态">
                <el-option
                  v-for="item in projectStatusOptions"
                  :key="item.projectStatus"
                  :label="item.projectStatusName"
                  :value="item.projectStatus"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="pt-20 pb-10">
              <el-select v-model="search.liabilityBranchOfficeId" clearable placeholder="责任公司" class="full-width">
                <el-option
                  v-for="item in companyOptions"
                  :key="item.weixiuhuiCompanyId"
                  :label="item.weixiuhuiCompanyName"
                  :value="item.weixiuhuiCompanyId"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="10" class="pt-20 pb-10">
              <el-date-picker
                v-model="createDatetime"
                :picker-options="createOptions"
                type="datetimerange"
                range-separator="-"
                start-placeholder="创建开始日期"
                end-placeholder="创建结束日期"
                class="full-width-m"
                clearable
                align="right"
              />
            </el-col>
          </div>
        </el-row>
        <el-row :gutter="10" class="pl-20 pr-20">
          <div class="grid-content">
            <el-col :xs="24" :sm="12" :md="10" :lg="8" :xl="8" class="pb-10">
              <el-input
                v-model="search.keyword"
                placeholder="输入项目名、合作商名查询"
                clearable/>
            </el-col>
            <el-col :xs="24" :sm="12" :md="4" :lg="4" :xl="4" class="pb-10">
              <el-button type="primary" class="query-btn pr-0 pl-0" @click="searchFrom">查询</el-button>
            </el-col>
          </div>
        </el-row>

        <el-row class="table-list">
          <div class="grid-content">
            <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11" class="pb-20">
              <div class="left-title text-center"><span>项目列表</span></div>
              <el-row class="pl-20 pr-20 pt-20 mr-1">
                <el-col :span="24">
                  <div class="grid-content">
                    <div class="project-toolbar flex-bar">
                      <span class="flex-item">未完工项目&ensp;{{ ongoingProject }}个</span>
                      <el-button v-show="checkPermission('sts:item:add')" type="primary" size="small" class="flex-item pr-0 pl-0" @click="showProjectForm(dialogModel.add)">新增项目</el-button>
                      <el-dialog :title="dialogTitle" :visible.sync="projectDialogVisible" :before-close="hideProjectForm" :close-on-click-modal="false">
                        <el-dialog :title="dialogTitle" :visible.sync="projectDialogVisible" :before-close="hideProjectForm">
                          <el-form ref="projectForm" :model="projectForm" :rules="projectRules" class="project-form">
                            <el-row type="flex" justify="space-around">
                              <el-col :span="11">
                                <el-form-item>
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label>合作商名称</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-select v-model="projectForm.partnerId" class="full-width" filterable clearable placeholder="请选择合作商名称">
                                        <el-option
                                          v-for="item in partnerOptions"
                                          :key="item.partnerCompanyId"
                                          :label="item.partnerCompanyName"
                                          :value="item.partnerCompanyId"/>
                                      </el-select>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="contractNo">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">合同编号</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="projectForm.contractNo"
                                        placeholder="请输入合同编号"
                                        clearable/>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="deviceName">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">设备名称</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="projectForm.deviceName"
                                        placeholder="请输入设备名称"
                                        clearable/>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="userName">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">用户姓名</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="projectForm.userName"
                                        placeholder="请输入用户姓名"
                                        clearable/>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                              </el-col>
                              <el-col :span="11">
                                <el-form-item prop="projectName">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">项目名称</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="projectForm.projectName"
                                        placeholder="请输入项目名称"
                                        clearable/>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="liabilityBranchOfficeId">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">责任公司</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-select v-model="projectForm.liabilityBranchOfficeId" class="full-width" clearable placeholder="请选择责任公司">
                                        <el-option
                                          v-for="item in companyOptions"
                                          :key="item.weixiuhuiCompanyId"
                                          :label="item.weixiuhuiCompanyName"
                                          :value="item.weixiuhuiCompanyId"/>
                                      </el-select>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="deviceNumber">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">设备数量</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input-number v-model="projectForm.deviceNumber" :min="1" class="full-width" controls-position="right" />
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="userMobile">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">用户电话</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="projectForm.userMobile"
                                        placeholder="请输入项目用户电话"
                                        clearable/>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row :gutter="5" type="flex" justify="space-around">
                              <el-col :span="4">
                                <div class="grid-context pl-10">
                                  <label class="required-label">用户地址</label>
                                </div>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectProvince">
                                  <el-select v-model="projectForm.projectProvince" filterable clearable placeholder="省份" @change="city(projectForm.projectProvince)">
                                    <el-option
                                      v-for="item in provinceOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectCity">
                                  <el-select v-model="projectForm.projectCity" filterable clearable placeholder="城市" @change="area(projectForm.projectCity)">
                                    <el-option
                                      v-for="item in cityOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectCommunity">
                                  <el-select v-model="projectForm.projectCommunity" filterable clearable placeholder="县/区" @change="street(projectForm.projectCommunity)">
                                    <el-option
                                      v-for="item in communityOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectStreet">
                                  <el-select v-model="projectForm.projectStreet" filterable clearable placeholder="街道">
                                    <el-option
                                      v-for="item in streetOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-form-item prop="projectAddress">
                                <el-col :span="20" :offset="4">
                                  <el-input
                                    v-model="projectForm.projectAddress"
                                    placeholder="详细地址"
                                    clearable/>
                                </el-col>
                              </el-form-item>
                            </el-row>
                            <el-form-item>
                              <el-row type="flex" justify="space-around">

                                <el-col :span="4">
                                  <div class="grid-context pl-10">
                                    <label>项目备注</label>
                                  </div>
                                </el-col>
                                <el-col :span="20">
                                  <el-input
                                    :rows="2"
                                    v-model="projectForm.remark"
                                    type="textarea"
                                    placeholder="请输入项目备注"/>
                                </el-col>
                              </el-row>
                            </el-form-item>
                          </el-form>
                          <div slot="footer" class="dialog-footer">
                            <el-button @click="hideProjectForm">取 消</el-button>
                            <el-button type="primary" @click="submitProjectForm('projectForm')">提 交</el-button>
                          </div>
                        </el-dialog>
                    </el-dialog></div>
                    <el-table
                      ref="projectData"
                      :data="projectData"
                      :show-header="false"
                      :max-height="495"
                      :row-class-name="projectRow"
                      highlight-current-row
                      class="project-table pt-10"
                      @current-change="changeProjectTable"
                    >
                      <el-table-column property="address" class="info-table">
                        <template slot-scope="scope">
                          <el-row style="justify-content:flex-start;align-items: center;display:flex;">
                            <el-col :span="18">
                              <h4>{{ scope.row.projectName?scope.row.projectName:"--" }}</h4>
                              <h5>{{ scope.row.deviceName?scope.row.deviceName:"--" }}</h5>
                            </el-col>
                            <el-col :span="6">
                              <h4>{{ scope.row.projectStatus?scope.row.projectStatus:"--" }}</h4>
                              <h5>{{ scope.row.deviceNumber?scope.row.deviceNumber+"台":"--" }}</h5>
                            </el-col>
                          </el-row>
                        </template>
                      </el-table-column>
                    </el-table>
                    <!--分页-->
                    <div class="project-pagination flex-pagination">
                      <el-pagination
                        :current-page="search.page"
                        :page-sizes="[10,20,30, 50]"
                        :page-size="search.pageSize"
                        :pager-count="5"
                        :total="search.total"
                        class="text-center"
                        background
                        layout="prev, pager, next,total"
                        @size-change="projectSizeChange"
                        @current-change="projectCurrentChange"
                    /></div>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-divider direction="vertical"/>
            <el-col :xs="13" :sm="13" :md="13" :lg="13" :xl="13" class="pb-20">
              <div class="right-title text-center"><span>项目工单列表</span></div>
              <el-row class="pl-20 pr-20 pt-20 mr-1">
                <el-col :span="24">
                  <div class="grid-content">
                    <div class="order-toolbar flex-bar">
                      <span v-show="orderVisible" class="flex-item">共 {{ orderTotal }} 张工单，计划 {{ planNumber }} 台，已完工 {{ completedNumber }} 台</span>
                      <el-button v-show="checkPermission('sts:order:add')" type="primary" size="small" class="flex-item pr-0 pl-0" @click="addProjectOrder">新增工单</el-button>
                      <el-dialog :title="dialogTitle" :visible.sync="orderDialogVisible" :close-on-click-modal="false">
                        <el-dialog :title="dialogTitle" :visible.sync="orderDialogVisible">
                          <el-form ref="orderForm" :model="orderForm" :rules="orderRules" class="order-form">
                            <el-row :gutter="10" type="flex" justify="space-around">
                              <el-col :span="11">
                                <el-form-item>
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label>项目编号</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input v-model="orderForm.projectNo" :disabled="true"/>
                                    </el-col>
                                  </el-row>

                                </el-form-item>
                                <el-form-item>
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label>合作商名称</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input v-model="orderForm.partnerName" :disabled="true"/>
                                    </el-col>
                                  </el-row>
                                </el-form-item>
                                <el-form-item prop="planNumber">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">计划数量</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input-number v-model="orderForm.planNumber" class="full-width" controls-position="right" />
                                    </el-col>
                                  </el-row>
                                </el-form-item>

                                <el-form-item prop="userName">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">用户姓名</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="orderForm.userName"
                                        placeholder="请输入用户姓名"
                                        clearable/>
                                    </el-col>
                                  </el-row>

                                </el-form-item>
                              </el-col>
                              <el-col :span="11">
                                <el-form-item>
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label>项目名称</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="orderForm.projectName"
                                        :disabled="true"
                                        placeholder="请输入项目名称"
                                        clearable/>
                                    </el-col>
                                  </el-row>

                                </el-form-item>
                                <el-form-item prop="serviceContent">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">服务内容</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="orderForm.serviceContent"
                                        placeholder="请输入设备名称"
                                        clearable/>
                                    </el-col>
                                  </el-row>

                                </el-form-item>
                                <el-form-item prop="settlePrice">
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">结算单价</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input-number v-model="orderForm.settlePrice" :step="0.1" :min="1" class="full-width" controls-position="right" />
                                    </el-col>
                                  </el-row>

                                </el-form-item>
                                <el-form-item>
                                  <el-row type="flex" justify="space-around">
                                    <el-col :span="8">
                                      <label class="required-label">用户电话</label>
                                    </el-col>
                                    <el-col :span="16">
                                      <el-input
                                        v-model="orderForm.userMobile"
                                        placeholder="请输入项目用户电话"
                                        clearable/>
                                    </el-col>
                                  </el-row>

                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row :gutter="10">
                              <el-col :span="4">
                                <div class="grid-context pl-10">
                                  <label class="required-label">用户地址</label>
                                </div>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectProvince">
                                  <el-select v-model="orderForm.projectProvince" clearable placeholder="省份" @change="city(orderForm.projectProvince)">
                                    <el-option
                                      v-for="item in provinceOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectCity">
                                  <el-select v-model="orderForm.projectCity" clearable placeholder="城市" @change="area(orderForm.projectCity)">
                                    <el-option
                                      v-for="item in cityOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectCommunity">
                                  <el-select v-model="orderForm.projectCommunity" clearable placeholder="县/区" @change="street(orderForm.projectCommunity)">
                                    <el-option
                                      v-for="item in communityOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="5">
                                <el-form-item prop="projectStreet">
                                  <el-select v-model="orderForm.projectStreet" clearable placeholder="街道">
                                    <el-option
                                      v-for="item in streetOptions"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"/>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row >
                              <el-col :span="20" :offset="4">
                                <el-input
                                  v-model="orderForm.projectAddress"
                                  placeholder="详细地址"
                                  clearable/>
                              </el-col>
                            </el-row>
                            <el-form-item class="mt-30">
                              <el-row>
                                <el-col :span="4">
                                  <div class="grid-context pl-10">
                                    <label>项目备注</label>
                                  </div>
                                </el-col>
                                <el-col :span="20">
                                  <el-input
                                    :rows="2"
                                    v-model="orderForm.remark"
                                    type="textarea"
                                    placeholder="请输入项目备注"/>
                                </el-col>
                              </el-row>
                            </el-form-item>
                          </el-form>
                          <div slot="footer" class="dialog-footer">
                            <el-button @click="hideProjectOrderForm">取 消</el-button>
                            <el-button type="primary" @click="submitOrderForm('orderForm')">提 交</el-button>
                          </div>
                        </el-dialog>
                    </el-dialog></div>
                    <el-table
                      ref="orderData"
                      :data="orderData"
                      :show-header="false"
                      :max-height="550"
                      :row-class-name="orderRow"
                      highlight-current-row
                      class="order-table pt-10"
                      @current-change="changeOrderTable"
                    >
                      <el-table-column property="address" class="info-table">
                        <template slot-scope="scope">
                          <el-row type="flex" justify="space-around" align="bottom">
                            <el-col :span="8">
                              <p>{{ scope.row.acceptName?scope.row.acceptName:'--' }}</p>
                              <p>{{ scope.row.serviceContent?scope.row.serviceContent:'--' }}</p>
                            </el-col>
                            <el-col :span="8">
                              <p>{{ scope.row.planNumber?scope.row.planNumber + "台" :'--' }}
                                {{ scope.row.finishedNumber?"/" + scope.row.finishedNumber + "台" :'' }}</p>
                            </el-col>
                            <el-col :span="8">
                              <p>{{ scope.row.projectOrderStatus?scope.row.projectOrderStatus:'--' }}</p>
                              <p>{{ scope.row.settlePrice?"￥ "+scope.row.settlePrice + "/台":'--' }}</p>
                            </el-col>
                          </el-row>
                        </template>
                      </el-table-column>
                    </el-table>
                    <!--分页-->
                    <!-- <div class="project-pagination flex-pagination">
                        <el-pagination
                          class="text-center"
                          :current-page="search.page"
                          :page-sizes="[10,20,30, 50]"
                          :page-size="search.pageSize"
                          :pager-count="4"
                          background
                          @size-change="projectSizeChange"
                          @current-change="projectCurrentChange"
                          layout="prev, pager, next,total"
                          :total="search.total"
                        ></el-pagination></div> -->
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-row>
      </div>
    </el-col>
    <el-col :span="13" class="full-height">
      <div class="grid-content full-height bg-white">
        <el-row :gutter="0" class="pt-20 bb-2">
          <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16" class="pl-20">
            <el-row :gutter="0" class="mb--2">
              <el-button-group>
                <el-button :class="detailTab==='project'?'group-btn tab-select':'group-btn'" @click="changeTab('project')">项目详情</el-button>
                <el-button v-show="order.projectOrderId" :class="detailTab==='order'?'group-btn tab-select':'group-btn'" @click="changeTab('order')">工单详情</el-button>
                <el-button v-show="order.projectOrderId&&order.projectOrderStatus!='待派工'" :class="detailTab==='downstream'?'group-btn tab-select':'group-btn'" @click="changeTab('downstream')">下游结算</el-button>
              </el-button-group>
            </el-row>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="text-right pr-30">
            <el-row :gutter="0">
              <span v-if="order.projectOrderId===null || order.projectOrderId===undefined">
                <el-button :disabled="project.projectStatus==='已完成'" type="text" @click="cancelProject(project.projectId)">项目取消</el-button>
              </span>
              <span v-if="order.projectOrderId===null || order.projectOrderId===undefined">
                <el-button v-show="checkPermission('sts:item:edit')" :disabled="project.projectStatus==='已完成'" type="text" @click="showProjectForm(dialogModel.edit)">项目编辑</el-button>
              </span>
              <span v-else>
                <el-button v-show="order.projectOrderId && checkPermission('sts:order:cancel')" :disabled="project.projectStatus==='已完成'" type="text" @click="cancelProjectOrder(order.projectOrderId)">工单取消</el-button>
                <el-button v-show="order.projectOrderId && checkPermission('sts:order:send')" :disabled="order.projectOrderStatus==='已完工' || order.projectOrderStatus==='完成结算'" type="text" @click="sendProjectOrder">派单</el-button>
                <el-button v-show="checkPermission('sts:order:edit')" :disabled="order.projectOrderStatus==='已完工' || order.projectOrderStatus==='完成结算'" type="text" @click="editProjectOrder">工单编辑</el-button>
              </span>
              <el-dialog :visible.sync="sendDialogVisible" title="网点信息" class="text-left">
                <el-row :gutter="10" type="flex">
                  <el-col :span="6">
                    <el-input
                      v-model="siteWorkerSearch.siteWord"
                      placeholder="请输入内容">
                      <i slot="prefix" class="el-input__icon el-icon-search"/>
                    </el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="siteWorkerSearch.projectProvince" filterable clearable placeholder="省份" @change="city(siteWorkerSearch.projectProvince)">
                      <el-option
                        v-for="item in provinceOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"/>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="siteWorkerSearch.projectCity" filterable clearable placeholder="城市" @change="area(siteWorkerSearch.projectCity)">
                      <el-option
                        v-for="item in cityOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"/>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="siteWorkerSearch.projectCommunity" filterable clearable placeholder="县/区" @change="street(siteWorkerSearch.projectCommunity)">
                      <el-option
                        v-for="item in communityOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"/>
                    </el-select>
                  </el-col>
                  <el-col :span="4">
                    <el-select v-model="siteWorkerSearch.projectStreet" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"/>
                    </el-select>
                  </el-col>
                  <el-col :span="3">
                    <el-button type="primary" @click="searchAssignable">查询</el-button>
                  </el-col>
                </el-row>
                <el-table :data="siteData" style="width: 100%">
                  <el-table-column label="网点名称">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.acceptName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="网点地址">
                    <template slot-scope="scope">
                      <el-popover trigger="hover" placement="top">
                        <p>住址: {{ scope.row.maintainSiteProvinceText + " " + scope.row.maintainSiteCityText + " " + scope.row.maintainSiteCommunityText }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag size="medium">{{ scope.row.maintainSiteFullAddressText }}</el-tag>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        @click="sendOrder(scope.$index, scope.row)">派单</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页-->
                <div class="project-pagination flex-pagination">
                  <el-pagination
                    :current-page="search.page"
                    :page-sizes="[10,20,30, 50]"
                    :page-size="siteWorkerSearch.pageSize"
                    :pager-count="5"
                    :total="siteWorkerSearch.total"
                    class="text-center"
                    background
                    layout="prev, pager, next,total"
                    @size-change="siteWorkerSizeChange"
                    @current-change="siteWorkerCurrentChange"
                /></div>
              </el-dialog>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="detailTab==='project'" :gutter="0" class="detail-row">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="grid-content">
              <el-row :gutter="0" class="pl-20">
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <p><label class="f-14 fw-500">项目编号：</label><span>{{ project.projectNo?project.projectNo:"--" }}</span></p>
                  <p><label>项目名称：</label><span>{{ project.projectName?project.projectName:"--" }}</span></p>
                  <p><label>合作商：</label><span>{{ project.partnerName?project.partnerName:"--" }}</span></p>
                  <p><label>用户信息：</label><span>{{ (project.userName?project.userName:"--")+" "+(project.userMobile?project.userMobile:"--") }}</span></p>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <p><label>合同编号：</label><span>{{ project.contractNo?project.contractNo:"--" }}</span></p>
                  <p><label>责任公司：</label><span>{{ project.liabilityBranchOfficeName?project.liabilityBranchOfficeName:"--" }}</span></p>
                  <p><label>设备名称数量：</label><span>{{ (project.deviceName?project.deviceName:"--")+" "+(project.deviceNumber?project.deviceNumber+"台":"--") }}</span></p>
                  <p><label>创建：</label><span>{{ (project.creatorName?project.creatorName:"--") }}
                    {{ project.createDatetime | parseTime('{y}-{m}-{d}') }}
                  </span></p>
                </el-col>
              </el-row>
              <el-row :gutter="0" class="pl-20">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <p><label>用户地址：</label><span>{{ project.projectAddress?project.projectAddress:"--" }}</span></p>
                  <p><label>备注：</label><span>{{ project.remark?project.remark:"--" }}</span></p>
                </el-col>
              </el-row>
              <h3 class="pl-20 mt-20">添加跟踪记录：</h3>
              <el-row type="flex" align="bottom" class="pl-20">
                <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                  <el-input
                    :autosize="{ minRows: 4, maxRows: 4}"
                    v-model="trackRecord"
                    type="textarea"
                    placeholder="请输入内容"/>
                </el-col>
                <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" class="pl-20">
                  <el-button :disabled="project.projectStatus==='已完成'" type="primary" class="save-btn" @click="saveProjectTrack">保存</el-button>
                </el-col>
              </el-row>
              <el-row class="mt-30 bb-1">
                <el-col :span="24">
                  <div class="grid-content mb--1">
                    <el-tag type="info" class="ml-20 group-tag">跟踪记录</el-tag>
                  </div>
                </el-col>
              </el-row>
              <el-row class="pl-20" style="margin-top: 2px;padding-top: 2px;">
                <el-col :span="24">
                  <div class="grid-content">
                    <div class="track-list">
                      <div v-for="(item,index) in trackList" :key="index" class="track-item">
                        <time style="color:#b3acac;">{{ item.createDatetime | moment("MM-DD HH:mm:ss") }}</time>&ensp;&ensp;<span>{{ item.creatorName }}：</span><span>{{ item.orderTraceRemark }}</span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row v-else-if="detailTab==='order'" :gutter="0" class="detail-row">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="grid-content">
              <el-row :gutter="0" class="pl-20">
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <p><label>工单编号：</label><span>{{ order.projectOrderNo?order.projectOrderNo:"--" }}</span></p>
                  <p><label>网点：</label><span>{{ order.acceptName?order.acceptName:"--" }}</span></p>
                  <p><label>服务内容：</label><span>{{ order.serviceContent?order.serviceContent:"--" }}</span></p>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <p><label>工单状态：</label><span>{{ order.projectOrderStatus?order.projectOrderStatus:"--" }}</span></p>
                  <p><label>师傅信息：</label><span>{{ (order.acceptName?order.acceptName:"--")+" "+(order.acceptMobile?order.acceptMobile:"--") }}</span></p>
                  <p><label>计划数量/单价：</label><span>{{ (order.planNumber?order.planNumber + "台":"--")+" "+(order.settlePrice?"￥"+ order.settlePrice + "/台":"--") }}</span></p>
                </el-col>
              </el-row>
              <el-row :gutter="0" class="pl-20">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <p><label>用户信息：</label><span>{{ (order.userName?order.userName:"--")+" "+(order.userMobile?order.userMobile:"--") }}</span></p>
                  <p><label>用户地址：</label><span>{{ order.projectAddress?order.projectAddress:"--" }}</span></p>
                  <p><label>工单备注：</label><span>{{ order.remark?order.remark:"--" }}</span></p>
                </el-col>
              </el-row>
              <el-row class="mt-30 bb-1">
                <el-col :span="24">
                  <div class="grid-content mb--1">
                    <el-tag type="info" class="ml-20 group-tag">完工信息</el-tag>
                  </div>
                </el-col>
              </el-row>
              <el-row class="pl-20 mt-20">
                <el-col :span="23">
                  <div class="grid-content">
                    <el-form ref="orderCompleteForm" :model="orderCompleteForm" :rules="orderFinishRules" label-width="100px" class="orderCompleteForm">
                      <el-form-item label="完工数量" prop="finishedNumber">
                        <el-input-number
                          :disabled="order.projectOrderStatus!=='待完工'"
                          v-model="orderCompleteForm.finishedNumber"
                          style="width: 150px;"/>
                      </el-form-item>
                      <el-form-item label="完工备注" prop="finishedRemark">
                        <el-input
                          :disabled="order.projectOrderStatus!=='待完工'"
                          v-model="orderCompleteForm.finishedRemark"
                          type="textarea"/>
                      </el-form-item>
                      <el-form-item label="完工图片" prop="images">
                        <el-upload
                          ref="uploadImage"
                          :disabled="order.projectOrderStatus!=='待完工'"
                          :file-list="images"
                          :on-change="addImage"
                          :on-preview="previewImage"
                          :on-remove="removeImage"
                          :auto-upload="false"
                          action="string"
                          class="images-upload"
                          list-type="picture-card">
                          <i class="el-icon-plus"/>
                        </el-upload>
                        <el-dialog :visible.sync="showImage" class="img-dialog">
                          <img :src="dialogImageUrl" width="100%" alt="">
                        </el-dialog>
                      </el-form-item>
                      <el-form-item>
                        <el-button
                          v-show="checkPermission('sts:order:finish')"
                          :disabled="order.projectOrderStatus!=='待完工'"
                          type="primary"
                          @click="submitForm('orderCompleteForm')">完工</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row v-else-if="detailTab==='downstream'" :gutter="0" class="detail-row">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div class="grid-content">
              <el-row v-if="order.projectOrderStatus!='完成结算'" class="mt-30 pl-20">
                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                  <el-row class="mb-20">
                    <el-col :span="24">
                      <el-select v-model="settle.type" class="full-width" placeholder="结算类型">
                        <el-option label="按数量" value="number"/>
                        <el-option label="按金额" value="money"/>
                        <el-option label="工程补贴" value="allowance"/>
                      </el-select>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-input v-model="settle.number" placeholder="结算数量/金额"/>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" class="pl-20">
                  <el-input
                    :autosize="{ minRows: 4, maxRows: 4}"
                    v-model="settle.remark"
                    type="textarea"
                    placeholder="结算备注"/>
                </el-col>
              </el-row>
              <el-row v-if="order.projectOrderStatus!='完成结算'" class="pl-20 mt-20">
                <el-col>
                  <el-button v-show="checkPermission('sts:settle:add')" :loading="settleloading" type="primary" class="text-center" @click="addSettleById()">添加结算</el-button>
                  <el-button v-show="checkPermission('sts:settle:finish')" type="warning" class="text-center" @click="conformSettle()">结束结算</el-button>
                </el-col>
              </el-row>

              <el-row class="mt-30 bb-1">
                <el-col :span="24">
                  <div class="grid-content mb--1">
                    <el-tag type="info" class="ml-20 group-tag">结算记录</el-tag>
                  </div>
                </el-col>
              </el-row>
              <el-row class="pl-20 mt-20">
                <el-col :span="23">
                  <div class="grid-content">
                    <el-row :gutter="30">
                      <el-col :span="7"><span>计划完工数量：{{ (order.planNumber) }}/台</span></el-col>
                      <el-col :span="7"><span>计划单价：￥{{ (order.settlePrice)| currency }}/台 </span></el-col>
                      <el-col :span="10"><span>计划结算金额：￥{{ (order.settlePrice*order.planNumber)| currency }}</span></el-col>
                    </el-row>
                    <el-row class="mt-20">
                      <el-col :span="22">
                        <el-table
                          :data="settleData"
                          border
                          max-height="260"
                          style="width: 100%"
                        >
                          <el-table-column
                            prop="createDatetime"
                            label="日期"
                          >
                            <template slot-scope="scope">
                              <span v-if="scope.row.createDatetime===&quot;合计:&quot;">{{ scope.row.createDatetime }}</span>
                              <span v-else>{{ scope.row.createDatetime | parseTime('{y}-{m}-{d}') }}</span>
                            </template>

                          </el-table-column>
                          <el-table-column
                            prop="businessSettlementType"
                            label="结算类型"
                          />
                          <el-table-column
                            prop="realSettlementAmount"
                            label="结算金额">
                            <template slot-scope="scope">
                              ¥{{ scope.row.realSettlementAmount | currency }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="statementStatus"
                            label="结算状态">
                            <template slot-scope="scope">
                              <span v-if="scope.row.statementStatus=='statementCreated'"> 预结</span>
                              <span v-if="scope.row.statementStatus=='statementSaved'"> 待结</span>
                              <span v-if="scope.row.statementStatus=='statementSettled'"> 已确认</span>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {
  assignOrder,
  assignableObject,
  addSettle,
  querysettlelist,
  getProjectList,
  getProjectDetail,
  saveProject,
  saveProjectOrder,
  getProjectOrderDetail,
  getProjectOrderList,
  finishProjectOrder,
  getProjectTrace,
  addProjectTrace,
  removeProject,
  removeProjectOrder
} from '@/api/engineepro'
import {
  listPartnerCompany, listBranchCompany, province, city, area, street
} from '@/api/common'
import { currency } from '@/utils/validate'
// , parseDate, pickerOptions
import { parseTime } from '@/utils'
// import axios from 'axios'
const projectStatusOptions = [
  { projectStatus: '', projectStatusName: '全部' },
  { projectStatus: '未完成', projectStatusName: '未完成' },
  { projectStatus: '已完成', projectStatusName: '已完成' }]

import { getUserInfo } from '@/api/login'
export default {

  filters: {
    currency: currency
  },

  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'))
      } else {
        // const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        const reg = /^\d{11}$/
        console.log(reg.test(value))
        if (reg.test(value)) {
          callback()
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }

    return {
      images: [],
      settleloading: false,
      showImage: false,
      createDatetime: null,
      detailTab: 'project',
      ongoingProject: 0, // 未完工项目
      orderVisible: false,
      projectDialogVisible: false,
      orderDialogVisible: false,
      sendDialogVisible: false,
      partnerOptions: [],
      projectStatusOptions: projectStatusOptions,
      provinceOptions: [], // 省份
      cityOptions: [], // 城市
      communityOptions: [], // 县区
      streetOptions: [], // 街道
      projectForm: {
        partnerId: '', // 合作商id
        projectName: '', // 项目名称
        contractNo: '', // 合同编号
        liabilityBranchOfficeId: '', // 责任公司id
        deviceName: '', // 设备名称
        deviceNumber: '', // 设备数量
        userName: '', // 用户名字
        userMobile: '', // 用户电话
        projectProvince: '', // 省份
        projectCity: '', // 城市
        projectCommunity: '', // 区县
        projectStreet: '', // 街道
        projectAddress: '', // 详细地址
        remark: ''// 备注
      },
      projectRules: {
        projectName: [
          { required: true, message: '请输入项目名称', trigger: 'change' }
        ],
        contractNo: [
          { required: true, message: '请输入合同编号', trigger: 'change' }
        ],
        deviceName: [
          { required: true, message: '请输入设备名称', trigger: 'change' }
        ],
        deviceNumber: [
          { type: 'number', required: true, message: '请输入设备数量', trigger: 'change' },
          {
            validator(rule, value, callback) {
              if (Number.isInteger(Number(value)) && Number(value) > 0) {
                callback()
              } else {
                callback(new Error('设备数量请输入大于0的整数'))
              }
            },
            trigger: 'change'
          }
        ],
        liabilityBranchOfficeId: [
          { required: true, message: '请选择责任公司', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '请输入用户名字', trigger: 'change' }
        ],
        userMobile: [
          { required: true, message: '请输入用户电话', validator: checkPhone, trigger: 'blur' }
        ],
        projectProvince: [
          { required: true, message: '请选择用户地址', trigger: 'change' }
        ],
        projectCity: [
          { required: true, message: '请选择用户地址', trigger: 'change' }
        ],
        projectCommunity: [
          { required: true, message: '请选择用户地址', trigger: 'change' }
        ]
      },
      orderForm: {
        partnerId: '', // 合作商id
        partnerName: '', // 合作商名称
        projectId: '', // 项目id
        projectNo: '',
        projectName: '', // 项目名称
        contractNo: '', // 项目编号
        serviceContent: '', // 服务内容
        planNumber: '', // 计划数量
        settlePrice: '', // 结算单价
        userName: '', // 用户名字
        userMobile: '', // 用户电话
        projectProvince: '', // 省份
        projectCity: '', // 城市
        projectCommunity: '', // 区县
        projectStreet: '', // 街道
        projectAddress: '', // 详细地址
        remark: ''// 备注
      },
      orderRules: {
        serviceContent: [
          { required: true, message: '请输入服务内容', trigger: 'change' }
        ],
        planNumber: [
          { required: false, type: 'number', min: 1, max: 10, message: '请输入计划数量，且不能超过项目数量', trigger: 'change' },
          {
            validator(rule, value, callback) {
              if (Number.isInteger(Number(value)) && Number(value) > 0) {
                callback()
              } else {
                callback(new Error('计划数量请输入大于0的整数'))
              }
            },
            trigger: 'change'
          }
        ],
        settlePrice: [
          { required: true, message: '请输入结算单价', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名字', trigger: 'change' }
        ],
        userMobile: [
          { required: true, message: '请输入用户电话', trigger: 'change' }
        ]
      },
      orderFinishRules: {
        finishedNumber: [
          { required: false, type: 'number', min: 1, max: 10, message: '请输入完工数量，且不能超过计划数量', trigger: 'change' },
          {
            validator(rule, value, callback) {
              if (Number.isInteger(Number(value)) && Number(value) > 0) {
                callback()
              } else {
                callback(new Error('完工数量请输入大于0的整数'))
              }
            },
            trigger: 'change'
          }
        ],
        finishedRemark: [
          { required: true, message: '请输入完工备注', trigger: 'change' }
        ]
      },
      orderData: [],
      orderTotal: 0, // 工单总数
      planNumber: 0, // 计划完工工单
      completedNumber: 0, // 已完工工单
      planCompleteNumber: 0, // 计划完工数量
      planPrice: 0, // 计划单价
      planAmount: 0, // 计划结算金额
      trackRecord: '', // 跟踪记录
      projectRow: 'project-row',
      orderRow: 'order-row',
      trackList: [],
      project: {}, // 项目详情
      order: {}, // 工单详情
      downstream: {}, // 下游详情
      dialogImageUrl: '',
      currentRow: null,
      search: {
        page: 1,
        total: 1,
        keyword: null,
        pageSize: 10,
        liabilityBranchOfficeId: null,
        projectStatus: null,
        createStartDatetime: null,
        createEndDatetime: null,
        pageNumber: null
      },
      siteWorkerSearch: {
        siteWord: '',
        projectProvince: '', // 省份
        projectCity: '', // 城市
        projectCommunity: '', // 区县
        projectStreet: '', // 街道
        page: 1,
        total: 1,
        pageSize: 10
      },
      orderSearch: {
        page: 1,
        total: 1,
        keyword: '',
        pageSize: 10
      },
      orderCompleteForm: {
        finishedNumber: '',
        finishedRemark: '',
        images: null
      },
      imageFile: null,
      imageFileList: [],
      settle: {
        type: '',
        number: '',
        remark: ''
      },
      projectData: [],
      settleData: [],
      siteData: [],
      companyOptions: [
        {
          value: '12345',
          label: '唯修汇'
        },
        {
          value: '12348',
          label: '奥克斯'
        }
      ],

      dialogTitle: '新增',
      dialogModel: {
        add: '新增',
        edit: '编辑'
      },

      createOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              const hours = new Date().getHours()
              const minutes = new Date().getMinutes()
              start.setTime(
                start.getTime() - 3600 * 1000 * hours - minutes * 60 * 1000
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              const hours = new Date().getHours()
              const minutes = new Date().getMinutes()
              end.setTime(
                end.getTime() - 3600 * 1000 * hours - minutes * 60 * 1000
              )
              start.setTime(
                start.getTime() -
                  3600 * 1000 * 24 -
                  3600 * 1000 * hours -
                  minutes * 60 * 1000
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              const day = new Date().getDay()
              const hours = new Date().getHours()
              const minutes = new Date().getMinutes()
              start.setTime(
                start.getTime() -
                  3600 * 1000 * 24 * day -
                  3600 * 1000 * hours -
                  minutes * 60 * 1000
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {
    projectDeviceNumber() {
      if (this.project === null || this.project.deviceNumber === null) {
        return 10
      } else {
        return this.project.deviceNumber
      }
    },
    orderPlanNumber() {
      return this.order.planNumber
    }
  },

  watch: {
    projectDeviceNumber(val, oldVal) {
      this.orderRules.planNumber[0].required = true
      this.orderRules.planNumber[0].max = val
    },
    orderPlanNumber(val, oldVal) {
      this.orderFinishRules.finishedNumber[0].required = true
      this.orderFinishRules.finishedNumber[0].max = val
    }
  },

  created() {
    this.loadProjectData()
    // this.loadsettleData();
    // this.getSettleListById(6095025);
    this.province()
    this.initBranchCompany()
    this.getPermission()
  },
  methods: {
    getProjectList() { // 查询项目详情
      getProjectList(this.search).then(response => {
        if (response.data.length === 0) {
          this.projectData = []
          return
        }
        this.projectData = response.data
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '加载失败',
          type: 'warning'
        })
      })
    },
    initBranchCompany() {
      listBranchCompany().then(
        response => {
          if (response && response.data.status === 'success') {
            this.companyOptions = response.data.data
          } else {
            this.$message({
              message: '项目分公司加载失败' + (response ? response.data.message : ''),
              type: 'warning'
            })
          }
        }).catch(error => {
        console.log(error)
      })
    },
    province() {
      this.cityOptions = []
      this.communityOptions = []
      this.streetOptions = []
      this.projectForm.projectProvince = ''
      this.projectForm.projectCity = ''
      this.projectForm.projectCommunity = ''
      this.projectForm.projectStreet = ''
      this.siteWorkerSearch.projectProvince = ''
      this.siteWorkerSearch.projectCity = ''
      this.siteWorkerSearch.projectCommunity = ''
      this.siteWorkerSearch.projectStreet = ''
      province().then(response => {
        if (!response || response.data.length === 0) {
          this.provinceOptions = []
          return
        }
        this.provinceOptions = response.data
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '加载失败',
          type: 'warning'
        })
      })
    },
    city(id) {
      this.projectForm.projectCity = ''
      this.projectForm.projectCommunity = ''
      this.projectForm.projectStreet = ''
      this.orderForm.projectCity = ''
      this.orderForm.projectCommunity = ''
      this.orderForm.projectStreet = ''
      this.siteWorkerSearch.projectCity = ''
      this.siteWorkerSearch.projectCommunity = ''
      this.siteWorkerSearch.projectStreet = ''
      this.communityOptions = []
      this.streetOptions = []
      this.cityOptions = []
      if (!id) {
        return
      }
      city(id).then(response => {
        if (response.data.length === 0) {
          this.cityOptions = []
          return
        }
        this.cityOptions = response.data
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '加载失败',
          type: 'warning'
        })
      })
    },
    area(id) {
      this.projectForm.projectCommunity = ''
      this.projectForm.projectStreet = ''
      this.orderForm.projectCommunity = ''
      this.orderForm.projectStreet = ''
      this.siteWorkerSearch.projectCommunity = ''
      this.siteWorkerSearch.projectStreet = ''
      this.streetOptions = []
      if (!id) {
        return
      }
      area(id).then(response => {
        if (response.data.length === 0) {
          this.communityOptions = []
          return
        }
        this.communityOptions = response.data
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '加载失败',
          type: 'warning'
        })
      })
    },
    street(id) {
      this.projectForm.projectStreet = ''
      this.orderForm.projectStreet = ''
      this.siteWorkerSearch.projectStreet = ''
      if (!id) {
        return
      }
      street(id).then(response => {
        if (response.data.length === 0) {
          this.streetOptions = []
          return
        }
        this.streetOptions = response.data
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '加载失败',
          type: 'warning'
        })
      })
    },
    // 添加结算信息
    addSettleById() {
      var id = this.order.projectOrderId
      var totalAmount = (this.order.settlePrice * this.order.planNumber).toFixed(2)
      var businessSettlementType = '工程结算'
      var settleAmount = null

      if (this.settle.type === null || this.settle.type === '') {
        this.$message('请选择结算类型')
        return false
      }

      var regex = /^[0-9]*(\.[0-9]{1,2})?$/
      if (!regex.test(this.settle.number)) {
        this.$message('数量/金额格式不正确！')
        return false
      }

      if (this.settle.type === 'number') {
        settleAmount = (this.order.settlePrice * this.settle.number).toFixed(2)
      } else if (this.settle.type === 'money') {
        settleAmount = this.settle.number
      } else {
        settleAmount = this.settle.number
        businessSettlementType = '工程补贴'
      }
      var addData = new FormData()

      addData.append('remark', this.settle.remark)
      if (businessSettlementType === null || settleAmount === null || settleAmount === '') {
        this.$message('请选择结算金额或者数量')
        return false
      }
      this.settleloading = true
      addData.append('totalAmount', totalAmount)// 最大金额结算金额（工程工单数量*单价）
      addData.append('settleAmount', settleAmount)// 结算金额
      addData.append('businessSettlementType', businessSettlementType)// 类型
      addSettle(addData, id).then(response => {
        // debugger
        if (response.data.status === 'success') {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.getSettleListById()
          this.settleloading = false
        } else {
          this.$message(response.data.messge)
          this.settleloading = false
        }
      })
    },
    // 根据id获取结算
    getSettleListById() {
      var id = this.order.projectOrderId
      querysettlelist(id).then(response => {
        if (response.data.status === 'success') {
          this.settleData = response.data.data
          var totalsettleAmount = 0
          for (var i = 0; i < this.settleData.length; i++) {
            totalsettleAmount += this.settleData[i].realSettlementAmount
          }
          this.settleData.push({ createDatetime: '合计:', realSettlementAmount: totalsettleAmount })
        } else {
          this.$message('查询工程单结算失败！')
        }
      })
    },
    onSubmit() {
      console.log('submit!')
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
      this.initChangeTable(row)
    },
    initChangeTable(row) {
      this.currentRow = row
    },
    loadProjectData() {
      this.orderVisible = false
      this.search.pageNumber = (this.search.page - 1) * this.search.pageSize
      getProjectList(this.search).then(response => {
        if (!response || response.data.data.list.length === 0) {
          this.orderVisible = false // 没有项目的时候不显示新增功能
          this.projectData = []
          this.orderData = []
          this.search.total = 0
          this.ongoingProject = 0
          return
        }
        this.orderData = []
        this.projectData = response.data.data.list
        this.search.total = response.data.data.projectNumber
        this.ongoingProject = response.data.data.todoProjectNumber
        this.$refs.projectData.setCurrentRow(this.projectData[0])
      }).catch(() => {
        this.$message({
          message: '加载project失败',
          type: 'warning'
        })
      })
    },
    searchFrom() {
      if (this.createDatetime !== null && this.createDatetime !== '') {
        this.search.createStartDatetime = parseTime(
          this.createDatetime[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.search.createEndDatetime = parseTime(
          this.createDatetime[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.search.createStartDatetime = null
        this.search.createEndDatetime = null
      }
      this.search.pageNumber = 0
      this.search.page = 1
      this.orderData = []
      this.orderTotal = 0
      this.planNumber = 0
      this.completedNumber = 0
      this.loadProjectData()
    },
    loadOrderData() {
      var param = {
        projectNo: this.orderForm.projectNo
      }
      getProjectOrderList(param).then(response => {
        if (response.data.data.list.length === 0) {
          this.orderData = []
          this.orderTotal = 0
          this.planNumber = 0
          this.completedNumber = 0
          return
        }
        this.orderData = response.data.data.list
        this.orderTotal = response.data.data.orderNumber
        this.planNumber = response.data.data.planNumber
        this.completedNumber = response.data.data.finishedNumber
        this.order = {}// 加载项目工单列表 去掉选择的工单
        this.changeTab('project')// 详情页展示项目详情
      }).catch(() => {
        this.$message({
          message: '加载project失败',
          type: 'warning'
        })
      })
    },
    /* loadsettleData() {
      var data = [{date: "2019-3-10",type: "工程结算",amount: 100,status: "待结"},
      {date: "2019-3-12",type: "工程结算",amount: 300,status: "待结"},
      {date: "2019-3-13",type: "工程补贴",amount: 200,status: "已结"},
      {date: "2019-3-14",type: "工程结算",amount: 500,status: "待结"}];
      this.settleData = data;
    },*/
    handleClick(tab, event) {
      console.log(tab, event)
    },
    changeProjectTable(row) { // 控制工单显示
      this.currentRow = row
      this.images = []
      if (row && row.projectNo) {
        this.order = {}
        this.loadProjectDateil(row.projectId)
        this.loadtrackList(row.projectNo)
        this.orderVisible = true
        this.province()
        if (row.projectProvince) this.city(row.projectProvince)
        if (row.projectCity) this.area(row.projectCity)
        if (row.projectCommunity) this.street(row.projectCommunity)
        this.orderForm.partnerId = row.partnerId
        this.orderForm.projectNo = row.projectNo
        this.orderForm.projectName = row.projectName
        this.orderForm.partnerName = row.partnerName
        this.orderForm.projectProvince = row.projectProvince
        this.orderForm.projectCity = row.projectCity
        this.orderForm.projectCommunity = row.projectCommunity
        this.orderForm.projectStreet = row.projectStreet
        this.orderForm.projectAddress = row.projectAddress
        this.loadOrderData()
      } else {
        this.orderForm.partnerId = ''
        this.orderForm.projectNo = ''
        this.orderForm.projectName = ''
        this.orderForm.partnerName = ''
        this.orderForm.projectProvince = ''
        this.orderForm.projectCity = ''
        this.orderForm.projectCommunity = ''
        this.orderForm.projectStreet = ''
        this.orderForm.projectAddress = ''
      }
    },
    changeOrderTable(row) { // 控制工单显示
      this.currentRow = row
      this.images = []
      if (row && row.projectNo) {
        // debugger;
        this.loadOrderDateil(row.projectOrderId)
        this.order.projectOrderId = row.projectOrderId
        this.order.planNumber = row.planNumber
        this.order.settlePrice = row.settlePrice
        this.order.projectOrderNo = row.projectOrderNo
        this.getSettleListById()
        console.debug(this.order)
      }
    },
    // 派送项目工单
    sendProjectOrder() {
      this.sendDialogVisible = true
      this.province()
      if (this.order.projectProvince) this.city(this.order.projectProvince)
      if (this.order.projectCity) this.area(this.order.projectCity)
      if (this.order.projectCommunity) this.street(this.order.projectCommunity)
      this.siteWorkerSearch.projectProvince = this.order.projectProvince
      this.siteWorkerSearch.projectCity = this.order.projectCity
      this.siteWorkerSearch.projectCommunity = this.order.projectCommunity
      this.siteWorkerSearch.street = this.order.street
      this.searchAssignable()
    },

    siteWorkerSizeChange(val) {
      this.siteWorkerSearch.pageSize = val
      this.searchAssignable()
    },
    siteWorkerCurrentChange(val) {
      this.siteWorkerSearch.page = val
      this.searchAssignable()
    },
    searchAssignable() {
      var data = {
        keyword: this.siteWorkerSearch.siteWord === null ? '' : this.siteWorkerSearch.siteWord,
        province: this.siteWorkerSearch.projectProvince === null ? '' : this.siteWorkerSearch.projectProvince,
        city: this.siteWorkerSearch.projectCity === null ? '' : this.siteWorkerSearch.projectCity,
        community: this.siteWorkerSearch.projectCommunity === null ? '' : this.siteWorkerSearch.projectCommunity,
        street: this.siteWorkerSearch.street === null ? '' : this.siteWorkerSearch.street,
        offset: (this.siteWorkerSearch.page - 1) * this.siteWorkerSearch.pageSize,
        count: this.siteWorkerSearch.pageSize
      }
      // const data = {
      //     keyword:"",
      //     province:"",
      //     city:"",
      //     community:"",
      //     street:"",
      //     offset:0,
      //     count:10
      // };

      assignableObject(data).then(response => {
        if (response.data.status === 'success') {
          this.siteData = response.data.data.list
          this.siteWorkerSearch.total = response.data.data.totalCount
        } else {
          this.$message({
            message: '可派单师傅加载失败',
            type: 'warning'
          })
        }
      })
    },

    // 隐藏项目工单
    hideProjectOrderForm() {
      this.orderDialogVisible = false
      this.orderForm = {
        partnerId: '', // 合作商id
        partnerName: '', // 合作商名称
        projectId: '', // 项目id
        projectOrderId: '', // 项目工单id
        projectNo: '',
        projectName: '', // 项目名称
        contractNo: '', // 项目编号
        serviceContent: '', // 服务内容
        planNumber: '', // 计划数量
        settlePrice: '', // 结算单价
        userName: '', // 用户名字
        userMobile: '', // 用户电话
        projectProvince: '', // 省份
        projectCity: '', // 城市
        projectCommunity: '', // 区县
        projectStreet: '', // 街道
        projectAddress: '', // 详细地址
        remark: ''// 备注
      }
    },

    // 添加项目工单
    addProjectOrder() {
      this.orderDialogVisible = true
      if (this.project) {
        this.orderForm.partnerId = this.project.partnerId
        this.orderForm.partnerName = this.project.partnerName
        this.orderForm.projectId = this.project.projectId
        this.orderForm.projectNo = this.project.projectNo
        this.orderForm.projectName = this.project.projectName
        this.orderForm.userName = this.project.userName
        this.orderForm.userMobile = this.project.userMobile
        this.orderForm.projectProvince = this.project.projectProvince
        this.orderForm.projectCity = this.project.projectCity
        this.orderForm.projectCommunity = this.project.projectCommunity
        this.orderForm.projectStreet = this.project.projectStreet
        this.orderForm.projectAddress = this.project.projectAddress
        this.orderForm.contractNo = this.project.projectNo
        this.orderForm.projectOrderId = ''
        this.orderForm.remark = ''
        this.orderForm.serviceContent = ''// 服务内容
        this.orderForm.planNumber = ''// 计划数量
        this.orderForm.settlePrice = ''// 结算单价
      } else {
        this.$message({
          message: '请先选择项目',
          type: 'erro'
        })
      }
    },
    // 修改项目工单
    editProjectOrder() {
      if (this.order) {
        this.orderDialogVisible = true
        this.province()
        if (this.order.projectProvince) this.city(this.order.projectProvince)
        if (this.order.projectCity) this.area(this.order.projectCity)
        if (this.order.projectCommunity) this.street(this.order.projectCommunity)
        this.orderForm.projectOrderId = this.order.projectOrderId
        this.orderForm.partnerId = this.order.partnerId
        this.orderForm.partnerName = this.order.partnerName
        this.orderForm.projectId = this.order.projectId
        this.orderForm.projectNo = this.order.projectNo
        this.orderForm.projectName = this.project.projectName
        this.orderForm.userName = this.order.userName
        this.orderForm.userMobile = this.order.userMobile
        this.orderForm.projectProvince = this.order.projectProvince
        this.orderForm.projectCity = this.order.projectCity
        this.orderForm.projectCommunity = this.order.projectCommunity
        this.orderForm.projectStreet = this.order.projectStreet
        this.orderForm.projectAddress = this.order.projectAddress
        this.orderForm.contractNo = this.order.contractNo
        this.orderForm.remark = this.order.remark
        this.orderForm.serviceContent = this.order.serviceContent
        this.orderForm.planNumber = this.order.planNumber
        this.orderForm.settlePrice = this.order.settlePrice
      } else {
        this.$message({
          message: '请选择工单进行编辑',
          type: 'erro'
        })
      }
    },
    projectSizeChange(val) {
      this.search.pageSize = val
      this.loadProjectData()
    },
    projectCurrentChange(val) {
      this.search.page = val
      this.loadProjectData()
    },
    changeTab(tabName) {
      this.detailTab = tabName
    },
    loadProjectDateil(projectId) {
      var data = {
        projectId: projectId
      }
      getProjectDetail(data).then(
        response => {
          if (response.data.status === 'success') {
            this.project = response.data.data
            this.detailTab = 'project'
          } else {
            this.$message({
              message: '项目详情加载失败',
              type: 'warning'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '项目详情加载失败',
            type: 'warning'
          })
          console.log(error)
        })
    },
    loadOrderDateil(projectOrderId) {
      var data = {
        projectOrderId: projectOrderId
      }
      getProjectOrderDetail(data).then(
        response => {
          if (response.data.status === 'success') {
            this.order = response.data.data.projectOrder

            this.clearOrderCompleteForm()
            if (response.data.data.finishedInfo && response.data.data.finishedInfo !== null) {
              this.orderCompleteForm = response.data.data.finishedInfo
              var finishedImg = response.data.data.finishedInfo.finishedImg
              if (finishedImg !== null && finishedImg !== undefined) {
                var imgArray = finishedImg.split(',')
                for (var i = 0; i < imgArray.length; i++) {
                  var obj = {
                    'name': 'img' + i,
                    'url': imgArray[i]
                  }
                  this.images.push(obj)
                }
              }
            }
            this.detailTab = 'order'
          } else {
            this.$message({
              message: '项目工单详情加载失败',
              type: 'warning'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '项目工单详情加载失败',
            type: 'warning'
          })
          console.log(error)
        })
    },
    clearOrderCompleteForm() {
      this.orderCompleteForm = {
        finishedNumber: '',
        finishedRemark: '',
        images: null
      }
      this.images = []
      this.dialogImageUrl = ''
      this.dialogVisible = false
    },
    loadDownstreamDateil() {},
    loadtrackList(projectNo) {
      var data = {
        projectNo: projectNo
      }
      getProjectTrace(data).then(
        response => {
          if (response.data.status === 'success') {
            this.trackList = response.data.data
          } else {
            this.$message({
              message: '项目跟踪记录加载失败',
              type: 'warning'
            })
          }
        })
        .catch(error => {
          this.$message({
            message: '项目跟踪记录加载失败',
            type: 'warning'
          })
          console.log(error)
        })
    },
    addImage(file, fileList) {
      const isLt2M = file.size / 1024 / 500 < 1
      if (!isLt2M) {
        this.$refs.uploadImage.clearFiles()
        this.$message.error('上传头像图片大小不能超过 500kb')
        return false
      }
      this.orderCompleteForm.images = file.raw
      this.imageFile = file
      this.imageFileList = fileList
    },
    removeImage(file, fileList) {
      this.orderCompleteForm.images = null
      console.log(file, fileList)
      if (file.url === this.dialogImageUrl) {
        this.dialogImageUrl = ''
        this.dialogVisible = false
      }
    },
    previewImage(file) {
      if (file.url) {
        this.dialogImageUrl = file.url
      } else {
        this.dialogImageUrl = URL.createObjectURL(file.raw)
      }
      this.showImage = true
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var data = new FormData() // 重点在这里 如果使用 var data = {}; data.inputfile=... 这样的方式不能正常上传
          data.append(
            'projectNo',
            this.order.projectNo
          )
          data.append(
            'projectOrderId',
            this.order.projectOrderId
          )
          data.append(
            'projectOrderNo',
            this.order.projectOrderNo
          )
          data.append(
            'finishNumber',
            this.orderCompleteForm.finishedNumber === null ? '' : this.orderCompleteForm.finishedNumber
          )
          data.append(
            'remark',
            this.orderCompleteForm.finishedRemark === null ? '' : this.orderCompleteForm.finishedRemark
          )
          for (var i = 0; i < this.imageFileList.length; i++) {
            data.append(
              'images',
              this.imageFileList[i].raw
            )
          }

          finishProjectOrder(data).then(response => {
            if (response.data.status === 'success') {
              this.$message({
                message: '保存成功！',
                type: 'success'
              })
              this.loadProjectData()
            } else {
              this.$message('保存失败！' + response.data.messge)
            }
          })
        }
      })
    },
    submitProjectForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var data = new FormData()
            var partnerName, liabilityBranchOfficeName
            for (var i = 0; i < this.partnerOptions.length; i++) {
              if (this.partnerOptions[i].partnerCompanyId === this.projectForm.partnerId) {
                partnerName = this.partnerOptions[i].partnerCompanyName
                break
              }
            }
            for (var j = 0; j < this.companyOptions.length; j++) {
              if (this.companyOptions[j].weixiuhuiCompanyId === this.projectForm.liabilityBranchOfficeId) {
                liabilityBranchOfficeName = this.companyOptions[j].weixiuhuiCompanyName
                break
              }
            }
            if (this.projectForm.projectId) {
              data.append('projectId', this.projectForm.projectId)
            }
            if (this.projectForm.projectNo !== null && this.projectForm.projectNo !== undefined) {
              data.append('projectNo', this.projectForm.projectNo)
            }
            data.append('partnerName', partnerName)
            data.append('projectName', this.projectForm.projectName)
            data.append('partnerId', this.projectForm.partnerId)
            data.append('contractNo', this.projectForm.contractNo)
            data.append('liabilityBranchOfficeId', this.projectForm.liabilityBranchOfficeId)
            data.append('liabilityBranchOfficeName', liabilityBranchOfficeName)
            data.append('deviceName', this.projectForm.deviceName)
            data.append('deviceNumber', this.projectForm.deviceNumber)
            data.append('userName', this.projectForm.userName)
            data.append('userMobile', this.projectForm.userMobile)
            data.append('projectProvince', this.projectForm.projectProvince)
            data.append('projectCity', this.projectForm.projectCity)
            data.append('projectCommunity', this.projectForm.projectCommunity)
            if (this.projectForm.projectStreet) {
              data.append('projectStreet', this.projectForm.projectStreet)
            }
            data.append('projectAddress', this.projectForm.projectAddress)
            data.append('remark', this.projectForm.remark)
            saveProject(data)
              .then(response => {
                if (response.data.status === 'success') {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  })
                  this.loadProjectData()
                  this.hideProjectForm()
                } else {
                  this.$message({
                    message: '保存失败',
                    type: 'warning'
                  })
                }
              })
              .catch(error => {
                this.$message({
                  message: '保存失败',
                  type: 'warning'
                })
                console.log(error)
              })
          })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消添加'
              })
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    conformSettle() {
      if (this.settleData === '' || this.settleData === null || this.settleData.length < 2) {
        this.$message({ message: '该工单还没有一条结算单，不能结束结算', type: 'warning' })
        return false
      }
      this.$confirm('完成结算后，不可再添加结算！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = new FormData()
        data.append('projectOrderId', this.order.projectOrderId)// this.projectForm.partnerId?this.projectForm.partnerId:
        data.append('projectOrderNo', this.order.projectOrderNo)
        data.append('projectNo', this.orderForm.projectNo)
        data.append('projectOrderStatus', '完成结算')

        saveProjectOrder(data).then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '完成结算成功',
              type: 'success'
            })
            this.orderDialogVisible = false
            this.loadOrderData()
            this.order.projectOrderStatus = '完成结算'
          } else {
            this.$message({
              message: '添加项目工单失败',
              type: 'warning'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    submitOrderForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认添加项目工单?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var data = new FormData()
            data.append('partnerId', this.projectForm.partnerId)// this.projectForm.partnerId?this.projectForm.partnerId:
            data.append('projectOrderId', this.orderForm.projectOrderId === null ? '' : this.orderForm.projectOrderId)
            data.append('partnerName', this.orderForm.partnerName)
            data.append('projectNo', this.orderForm.projectNo)
            data.append('serviceContent', this.orderForm.serviceContent)
            data.append('planNumber', this.orderForm.planNumber)
            data.append('settlePrice', this.orderForm.settlePrice)
            data.append('userName', this.orderForm.userName)
            data.append('userMobile', this.orderForm.userMobile)
            data.append('projectProvince', this.orderForm.projectProvince === null ? '' : this.orderForm.projectProvince)
            data.append('projectCity', this.orderForm.projectCity === null ? '' : this.orderForm.projectCity)
            data.append('projectCommunity', this.orderForm.projectCommunity === null ? '' : this.orderForm.projectCommunity)
            data.append('projectStreet', this.orderForm.projectStreet === null ? '' : this.orderForm.projectStreet)
            data.append('projectAddress', this.orderForm.projectAddress)
            data.append('remark', this.orderForm.remark === null ? '' : this.orderForm.remark)
            saveProjectOrder(data).then(response => {
              if (response.data.status === 'success') {
                this.$message({
                  message: '保存工单成功',
                  type: 'success'
                })
                this.orderDialogVisible = false
                this.loadOrderData()
                this.loadtrackList(this.project.projectNo)
              } else {
                this.$message({
                  message: response.data.messge,
                  type: 'warning'
                })
              }
            }).catch(error => {
              this.$message({
                message: '保存工单异常',
                type: 'warning'
              })
              console.log(error)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    saveProjectTrack() {
      if (this.project === null || this.trackRecord === null || this.trackRecord.trim().length === 0) {
        this.$message({
          message: '请输入跟踪记录',
          type: 'warning'
        })
        return
      }
      const data = new FormData()
      data.append(
        'projectNo', this.project.projectNo
      )
      data.append(
        'remark', this.trackRecord
      )
      this.$confirm('确认提交吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addProjectTrace(data).then(
          response => {
            if (response.data.status === 'success') {
              this.$message({
                message: '新增项目跟踪记录成功',
                type: 'success'
              })
              this.trackRecord = ''
              this.loadtrackList(this.project.projectNo)
            } else {
              this.$message({
                message: '新增项目跟踪记录失败',
                type: 'warning'
              })
            }
          })
          .catch(error => {
            this.$message({
              message: '新增项目跟踪记录失败',
              type: 'warning'
            })
            console.log(error)
          })
      }).catch(error => {
        this.$message({
          message: '新增项目跟踪记录失败',
          type: 'warning'
        })
        console.log(error)
      })
    },
    sendOrder(index, row) {
      var data = new FormData()
      data.append('projectNo', this.order.projectNo === null ? '' : this.order.projectNo)
      data.append('projectOrderId', this.order.projectOrderId === null ? '' : this.order.projectOrderId)
      data.append('projectOrderNo', this.order.projectOrderNo === null ? '' : this.order.projectOrderNo)
      data.append('acceptId', row.acceptId === null ? '' : row.acceptId)
      data.append('acceptName', row.acceptName === null ? '' : row.acceptName)
      data.append('acceptMobile', row.maintainSiteMobile ? '' : row.maintainSiteMobile)
      assignOrder(data).then(
        response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '派单成功',
              type: 'success'
            })
            this.sendDialogVisible = false
            this.loadOrderData()
          } else {
            this.$message({
              message: '派单成功，' + response.data.message,
              type: 'warning'
            })
          }
        })
    },
    // 取消项目
    cancelProject(projectId) {
      const self = this
      if (self.orderTotal === 0) {
        self.$confirm('你正在删除该项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeProject(projectId).then(response => {
            if (response.data.status === 'success') {
              self.loadProjectData()
              self.$message({
                message: '取消项目成功',
                type: 'success'
              })
            } else {
              self.$message({
                message: '取消项目失败',
                type: 'warning'
              })
            }
          }).catch(error => {
            self.$message.error('取消项目出错！')
            console.log(error)
          })
        }).catch(() => {})
      } else {
        self.$message.error('项目还存在工单，不能取消！')
      }
    },
    // 取消工单
    cancelProjectOrder(projectOrderId) {
      const self = this
      self.$confirm('你正在删除该工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeProjectOrder(projectOrderId).then(response => {
          if (response.data.status === 'success') {
            self.loadOrderData()
            self.$message({
              message: '取消工单成功',
              type: 'success'
            })
          } else {
            self.$message({
              message: '取消工单失败',
              type: 'warning'
            })
          }
        }).catch(error => {
          self.$message.error('取消工单出错！')
          console.log(error)
        })
      }).catch(() => {
        this.$message({})
      })
    },
    showProjectForm(title) {
      this.projectDialogVisible = true
      var data = {}
      listPartnerCompany(data).then(
        response => {
          if (response.data.status === 'success') {
            this.partnerOptions = response.data.data
          } else {
            this.$message({
              message: '项目合作商加载失败' + response.data.message,
              type: 'warning'
            })
          }
        })

      this.dialogTitle = title
      if (this.dialogModel.edit === title) { // 编辑模式
        this.projectForm = {
          projectId: this.project.projectId,
          projectNo: this.project.projectNo,
          partnerId: this.project.partnerId,
          projectName: this.project.projectName,
          contractNo: this.project.contractNo,
          liabilityBranchOfficeId: this.project.liabilityBranchOfficeId,
          deviceName: this.project.deviceName,
          deviceNumber: this.project.deviceNumber,
          userName: this.project.userName,
          userMobile: this.project.userMobile,
          projectProvince: this.project.projectProvince,
          projectCity: this.project.projectCity,
          projectCommunity: this.project.projectCommunity,
          projectStreet: this.project.projectStreet,
          projectAddress: this.project.projectAddress,
          remark: this.project.remark
        }
      }
    },
    hideProjectForm() {
      this.projectDialogVisible = false
      this.projectForm = {
        partnerId: '', // 合作商id
        projectName: '', // 项目名称
        contractNo: '', // 合同编号
        liabilityBranchOfficeId: '', // 责任公司id
        deviceName: '', // 设备名称
        deviceNumber: '', // 设备数量
        userName: '', // 用户名字
        userMobile: '', // 用户电话
        projectProvince: '', // 省份
        projectCity: '', // 城市
        projectCommunity: '', // 区县
        projectStreet: '', // 街道
        projectAddress: '', // 详细地址
        remark: ''// 备注
      }
      this.$refs['projectForm'].resetFields()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 权限
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'token') {
          this.userid = arr2[1]
        } else {
          this.userid = 1
        }
      }
      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo()
        .then(response => {
          if (response.data.status === 'ok') {
            localStorage.setItem(
              this.userid,
              JSON.stringify(response.data.data.permissions)
            )
          }
        })
        .catch(error => {
          console.log(error)
        })
    },

    checkPermission(value) {
      if (value) {
        if (
          localStorage.getItem(this.userid) &&
          localStorage.getItem(this.userid).indexOf(value) >= 0
        ) {
          if (value === 'sts:order:add' && this.orderVisible === false) {
            return false
          }
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }

  }
}
</script>
